CSS தனிப்பயன் ஹைலைட் அடுக்கு: உரைத் தேர்வு முன்னுரிமை மேலாண்மை

வலை உலாவிகளில் இயல்புநிலை உரைத் தேர்வு ஹைலைட் பெரும்பாலும் வெள்ளை உரையுடன் ஒரு அடிப்படை நீல பின்னணியாக இருக்கும். செயல்பாட்டு ரீதியாக இருந்தாலும், இது உங்கள் வலைத்தளத்தின் பிராண்டிங் அல்லது அணுகல்தன்மை தேவைகளுடன் பொருந்தாமல் இருக்கலாம். அதிர்ஷ்டவசமாக, CSS உரைத் தேர்வு ஹைலைட்டுகளைத் தனிப்பயனாக்க சக்திவாய்ந்த கருவிகளை வழங்குகிறது, இது பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் பயனர் நட்பு அனுபவத்தை உருவாக்க உங்களை அனுமதிக்கிறது. இந்த இடுகை CSS தனிப்பயன் ஹைலைட் அடுக்கைப் பற்றி ஆராய்கிறது, கிடைக்கக்கூடிய பல்வேறு நுட்பங்களையும், விரும்பிய விளைவை அடைய அவற்றின் முன்னுரிமையை எவ்வாறு நிர்வகிப்பது என்பதையும் ஆராய்கிறது. நாங்கள் நிலையான ::selection சூடோ-எலிமெண்ட், மேலும் மேம்பட்ட ::highlight சூடோ-எலிமெண்ட், மற்றும் தனிப்பயன் ஹைலைட்டுகளை எவ்வாறு வரையறுப்பது, அவற்றின் நடத்தையை நிர்வகிக்கும் அடுக்கு மற்றும் தனித்தன்மை விதிகள் மீது கவனம் செலுத்துவோம்.

அடிப்படைகளைப் புரிந்துகொள்ளுதல்: ::selection சூடோ-எலிமெண்ட்

::selection சூடோ-எலிமெண்ட் என்பது CSS-ல் உரைத் தேர்வு ஸ்டைலிங்கின் அடிப்படையாகும். இது ஒரு எலிமெண்டிற்குள் தேர்ந்தெடுக்கப்பட்ட உரையின் தோற்றத்தை மாற்றியமைக்க உங்களை அனுமதிக்கிறது. இது நவீன உலாவிகளில் பரவலாக ஆதரிக்கப்படுகிறது மற்றும் தேர்ந்தெடுக்கப்பட்ட உரையின் பின்னணி நிறம், உரை நிறம் மற்றும் பிற அடிப்படை பண்புகளைத் தனிப்பயனாக்க ஒரு எளிய வழியை வழங்குகிறது.

::selection-இன் அடிப்படைப் பயன்பாடு

::selection-ஐப் பயன்படுத்த, நீங்கள் அதை ஒரு CSS விதியுடன் குறிவைத்து, விரும்பிய ஸ்டைல்களை வரையறுக்க வேண்டும். உதாரணமாக, உரை தேர்ந்தெடுக்கப்படும்போது பின்னணி நிறத்தை மஞ்சள் நிறமாகவும், உரை நிறத்தை கருப்பு நிறமாகவும் மாற்ற, நீங்கள் பின்வரும் CSS-ஐப் பயன்படுத்துவீர்கள்:

            ::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

இந்த விதி உங்கள் வலைத்தளம் முழுவதும் உள்ள அனைத்து உரைத் தேர்வுகளுக்கும் பொருந்தும். நீங்கள் குறிப்பிட்ட எலிமெண்டுகளை குறிவைக்க விரும்பினால், நீங்கள் மேலும் குறிப்பிட்ட தேர்வான்களைப் பயன்படுத்தலாம்:

            p::selection {
  background-color: lightgreen;
  color: darkgreen;
}

            

              
                Copy
              
            
          

இந்த விதி <p> (பத்தி) எலிமெண்டுகளுக்குள் உள்ள உரைத் தேர்வுகளை மட்டுமே பாதிக்கும்.

::selection-இன் வரம்புகள்

::selection ஒரு பயனுள்ள கருவியாக இருந்தாலும், அதற்கு வரம்புகள் உள்ளன. இது முக்கியமாக background-color மற்றும் color போன்ற அடிப்படை பண்புகளை மாற்றியமைக்க உங்களை அனுமதிக்கிறது. கிரேடியண்ட்களைப் பயன்படுத்துதல் அல்லது நிழல்களைப் பயன்படுத்துதல் போன்ற மிகவும் சிக்கலான ஸ்டைலிங் விருப்பங்கள் நேரடியாக ஆதரிக்கப்படவில்லை. கூடுதலாக, ::selection வெவ்வேறு ஸ்டைல்களுடன் பல, ஒன்றுடன் ஒன்று இணையும் ஹைலைட்டுகளை உருவாக்குவதற்கான ஒரு பொறிமுறையை வழங்காது. இங்குதான் ::highlight சூடோ-எலிமெண்ட் வருகிறது.

::highlight-ஐ அறிமுகப்படுத்துதல்: ஒரு சக்திவாய்ந்த மாற்று

::highlight சூடோ-எலிமெண்ட் என்பது CSS-க்கு ஒரு சமீபத்திய সংযোজন ஆகும், இது உரைத் தேர்வு ஹைலைட்டுகள் மீது அதிக நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது. இது பெயரிடப்பட்ட ஹைலைட்டுகளை வரையறுக்க உங்களை அனுமதிக்கிறது, தேர்ந்தெடுக்கப்பட்ட உரையின் வெவ்வேறு பகுதிகளுக்கு வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்த உதவுகிறது. இது சிக்கலான தளவமைப்புகளுக்கு அல்லது ஒரு தேர்விற்குள் வெவ்வேறு வகையான உள்ளடக்கங்களை வேறுபடுத்த வேண்டியிருக்கும் போது குறிப்பாக பயனுள்ளதாக இருக்கும்.

highlight-name பண்புடன் பெயரிடப்பட்ட ஹைலைட்டுகளை வரையறுத்தல்

::highlight-ஐப் பயன்படுத்துவதற்கான திறவுகோல் highlight-name பண்பு ஆகும். இந்த பண்பு ஒரு குறிப்பிட்ட ஹைலைட்டிற்கு ஒரு பெயரை ஒதுக்க உங்களை அனுமதிக்கிறது, அதை நீங்கள் பின்னர் CSS விதிகளுடன் குறிவைக்கலாம். ::highlight-ஐப் பயன்படுத்த, நீங்கள் முதலில் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி பெயரிடப்பட்ட ஹைலைட்டை வரையறுக்க வேண்டும். ஏனென்றால் CSS தானே ஒரு புதிய ஹைலைட் பெயரை வரையறுக்க முடியாது; அது உலாவி ஏற்கனவே உருவாக்கிய ஹைலைட்டுகளை மட்டுமே *ஸ்டைல்* செய்ய முடியும். இதோ ஒரு உதாரணம்:

            // JavaScript:
CSS.registerProperty({
  name: '--my-custom-highlight',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent',
});

            

              
                Copy
              
            
          

இந்த ஜாவாஸ்கிரிப்ட் குறியீடு `--my-custom-highlight` என்ற CSS தனிப்பயன் பண்பைப் பதிவு செய்கிறது, இது வண்ண மதிப்புகளை ஏற்றுக்கொள்கிறது மற்றும் மரபுரிமையாகப் பெறாது. இது உங்கள் ஹைலைட்டை ஸ்டைல் செய்வதற்கு முன் ஒரு அவசியமான படியாகும். இப்போது, நீங்கள் ஹைலைட்டைப் பயன்படுத்த CSS-ஐப் பயன்படுத்தலாம்:

            ::highlight(my-custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: white;
}

            

              
                Copy
              
            
          

இந்த CSS விதி "my-custom-highlight" என்ற ஹைலைட்டைக் குறிவைத்து, 30% ஒளிபுகாநிலை மற்றும் வெள்ளை உரையுடன் சிவப்பு பின்னணியைப் பயன்படுத்துகிறது. ஒளிபுகாநிலையை அடைய rgba-இன் பயன்பாட்டைக் கவனியுங்கள். நீங்கள் பெயரை (எ.கா., `my-custom-highlight`) உருவாக்கி, பின்னர் அதை CSS-ல் `::highlight(my-custom-highlight)` வழியாகக் குறிப்பிட வேண்டும்.

ஜாவாஸ்கிரிப்டுடன் ஹைலைட்டுகளைப் பயன்படுத்துதல்

இப்போது, எங்கள் வலைப்பக்கத்தில் ஹைலைட்டை உண்மையில் பயன்படுத்த, நாம் ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவோம். இது பொதுவாக ஹைலைட் செய்யப்பட வேண்டிய உரையின் பகுதியை ஒரு `` டேக் மூலம் சுற்றி, `highlight-name` ஸ்டைலை ஒதுக்குவதன் மூலம் செய்யப்படுகிறது:

            <p>This is some <span style="--highlight: my-custom-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், "important" என்ற வார்த்தை "my-custom-highlight"-க்கு வரையறுக்கப்பட்ட ஸ்டைல்களுடன் ஹைலைட் செய்யப்படும். மற்றொரு எடுத்துக்காட்டாக இருக்கலாம்:

            <p>This is <span style="--highlight: warning-highlight;">a warning message</span> that needs attention.</p>

            

              
                Copy
              
            
          

இங்கு 'warning-highlight' என்பது நீங்கள் CSS.registerProperty மூலம் பதிவுசெய்த மற்றும் ::highlight(warning-highlight) CSS பிளாக்கிற்குள் பயன்படுத்திய பெயருடன் பொருந்துகிறது.

::highlight-இன் நன்மைகள்

• பல ஹைலைட்டுகள்: நீங்கள் பல பெயரிடப்பட்ட ஹைலைட்டுகளை வரையறுத்து, அவற்றை உரையின் வெவ்வேறு பகுதிகளுக்குப் பயன்படுத்தலாம்.
• நுண்ணிய கட்டுப்பாடு: வெவ்வேறு ஹைலைட் ஸ்டைல்களுடன் உரையின் குறிப்பிட்ட பகுதிகளை நீங்கள் குறிவைக்கலாம்.
• பொருளுணர் ஹைலைட்டிங்: பிழைகள் அல்லது எச்சரிக்கைகளை ஹைலைட் செய்வது போன்ற பொருளை வெளிப்படுத்த ஹைலைட்டுகளைப் பயன்படுத்தலாம்.

CSS ஹைலைட் அடுக்கைப் புரிந்துகொள்ளுதல்: முன்னுரிமை மற்றும் தனித்தன்மை

ஒரே உரைக்கு பல ஹைலைட் ஸ்டைல்கள் பொருந்தும்போது, எந்த ஸ்டைல் முன்னுரிமை பெறும் என்பதை CSS அடுக்கு தீர்மானிக்கிறது. அடுக்கு என்பது உலாவிகள் வெவ்வேறு CSS விதிகளுக்கு இடையிலான முரண்பாடுகளைத் தீர்க்கப் பயன்படுத்தும் விதிகளின் தொகுப்பாகும். தனிப்பயன் ஹைலைட் ஸ்டைல்களை நிர்வகிப்பதற்கும், விரும்பிய ஸ்டைல்கள் சரியாகப் பயன்படுத்தப்படுவதை உறுதி செய்வதற்கும் அடுக்கைப் புரிந்துகொள்வது முக்கியம்.

முன்னுரிமையின் வரிசை

CSS அடுக்கு ஒரு குறிப்பிட்ட முன்னுரிமை வரிசையைப் பின்பற்றுகிறது, அதை பின்வருமாறு சுருக்கமாகக் கூறலாம் (குறைந்த முன்னுரிமையிலிருந்து அதிக முன்னுரிமை வரை):

1. பயனர்-முகவர் ஸ்டைல்கள்: உலாவியின் இயல்புநிலை ஸ்டைல்கள்.
2. பயனர் ஸ்டைல்கள்: பயனரால் வரையறுக்கப்பட்ட ஸ்டைல்கள் (எ.கா., உலாவி நீட்டிப்புகள் மூலம்).
3. ஆசிரியர் ஸ்டைல்கள்: வலைத்தள டெவலப்பரால் வரையறுக்கப்பட்ட ஸ்டைல்கள் (உங்கள் CSS).
4. !important ஆசிரியர் ஸ்டைல்கள்: வலைத்தள டெவலப்பரால் !important திறவுச்சொல்லுடன் வரையறுக்கப்பட்ட ஸ்டைல்கள்.
5. !important பயனர் ஸ்டைல்கள்: பயனரால் !important திறவுச்சொல்லுடன் வரையறுக்கப்பட்ட ஸ்டைல்கள்.

இந்த நிலைகள் ஒவ்வொன்றிலும், தனித்தன்மை ஒரு முக்கிய பங்கு வகிக்கிறது. தனித்தன்மை என்பது ஒரு CSS தேர்வானின் எடை அல்லது முக்கியத்துவத்தைக் குறிக்கிறது. மேலும் குறிப்பிட்ட தேர்வான்கள் குறைவான குறிப்பிட்ட தேர்வான்களை மேலெழுதுகின்றன.

தனித்தன்மை விதிகள்

தனித்தன்மை பின்வரும் விதிகளின் அடிப்படையில் கணக்கிடப்படுகிறது:

1. இன்லைன் ஸ்டைல்கள்: HTML எலிமெண்டில் நேரடியாக style பண்பைப் பயன்படுத்தி வரையறுக்கப்பட்ட ஸ்டைல்கள் மிக உயர்ந்த தனித்தன்மையைக் கொண்டுள்ளன.
2. ஐடிகள்: அவற்றின் ஐடி மூலம் எலிமெண்டுகளைக் குறிவைக்கும் தேர்வான்கள் (எ.கா., #my-element) அதிக தனித்தன்மையைக் கொண்டுள்ளன.
3. வகுப்புகள், சூடோ-வகுப்புகள், மற்றும் பண்புக்கூறுகள்: அவற்றின் வகுப்பு (எ.கா., .my-class), சூடோ-வகுப்புகள் (எ.கா., :hover), அல்லது பண்புக்கூறுகள் (எ.கா., [type="text"]) மூலம் எலிமெண்டுகளைக் குறிவைக்கும் தேர்வான்கள் நடுத்தர தனித்தன்மையைக் கொண்டுள்ளன.
4. எலிமெண்டுகள் மற்றும் சூடோ-எலிமெண்டுகள்: அவற்றின் டேக் பெயர் (எ.கா., p) அல்லது சூடோ-எலிமெண்டுகள் (எ.கா., ::selection, ::highlight) மூலம் எலிமெண்டுகளைக் குறிவைக்கும் தேர்வான்கள் குறைந்த தனித்தன்மையைக் கொண்டுள்ளன.
5. உலகளாவிய தேர்வான்கள்: உலகளாவிய தேர்வான்கள் (*) மிகக் குறைந்த தனித்தன்மையைக் கொண்டுள்ளன.

ஒரே எலிமெண்டிற்கு பல தேர்வான்கள் பொருந்தும்போது, உலாவி ஒவ்வொரு தேர்வானின் தனித்தன்மையைக் கணக்கிட்டு, மிக உயர்ந்த தனித்தன்மை கொண்ட தேர்வானிலிருந்து ஸ்டைலைப் பயன்படுத்துகிறது. இரண்டு தேர்வான்கள் ஒரே தனித்தன்மையைக் கொண்டிருந்தால், CSS ஸ்டைல்ஷீட்டில் பின்னர் தோன்றும் தேர்வானிலிருந்து ஸ்டைல் பயன்படுத்தப்படுகிறது.

ஹைலைட் ஸ்டைல்களுக்கு தனித்தன்மையை ஏற்படுத்துதல்

தனிப்பயன் ஹைலைட் ஸ்டைல்களுடன் பணிபுரியும் போது, தனித்தன்மை குறிப்பாக முக்கியமானது, ஏனென்றால் நீங்கள் ::selection மற்றும் ::highlight இரண்டையும், சாத்தியமான இன்லைன் ஸ்டைல்களுடன் பயன்படுத்தலாம். தனித்தன்மை பரிசீலனைகள் எவ்வாறு பொருந்தக்கூடும் என்பது இங்கே:

1. ::selection vs. ::highlight: ::highlight பொதுவாக ::selection-ஐ விட *அதிக* குறிப்பிட்டதாகக் கருதப்படுகிறது. இதன் பொருள் ::selection மற்றும் ::highlight விதிகள் இரண்டும் ஒரே உரைக்குப் பொருந்தினால், ::highlight விதிகள் பொதுவாக முன்னுரிமை பெறும்.
2. இன்லைன் ஸ்டைல்கள்: எப்போதுமே, இன்லைன் ஸ்டைல்கள் (HTML எலிமெண்டில் நேரடியாக `style` பண்பைப் பயன்படுத்துதல்) ::selection மற்றும் ::highlight ஸ்டைல்கள் இரண்டையும் மேலெழுதுகின்றன, !important பயன்படுத்தப்படாவிட்டால்.
3. தேர்வானின் தனித்தன்மை: ::highlight உடன் பயன்படுத்தப்படும் தேர்வான்களின் தனித்தன்மை மேலும் முடிவைப் பாதிக்கலாம். உதாரணமாக, p::highlight(my-highlight) என்பது வெறும் ::highlight(my-highlight)-ஐ விட அதிக குறிப்பிட்டது மற்றும் இரண்டும் பொருந்தினால் முன்னுரிமை பெறும்.

செயல்பாட்டில் தனித்தன்மையின் எடுத்துக்காட்டுகள்

சில எடுத்துக்காட்டுகளுடன் இதை விளக்குவோம்:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

::highlight(my-highlight) {
  background-color: red;
  color: yellow;
}

            

              
                Copy
              
            
          

            <p>This is some <span style="--highlight: my-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

இந்த வழக்கில், பயனர் உரையைத் தேர்ந்தெடுக்கும்போது, "my-highlight" எனக் குறிக்கப்பட்ட பகுதி சிவப்பு பின்னணி மற்றும் மஞ்சள் உரையைக் கொண்டிருக்கும், ஏனென்றால் ::highlight(my-highlight) விதி அதிக குறிப்பிட்டது மற்றும் அந்த குறிப்பிட்ட span-க்கான பொதுவான ::selection விதியை மேலெழுதுகிறது.

மற்றொரு எடுத்துக்காட்டைக் கருத்தில் கொள்ளுங்கள்:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

p::selection {
  background-color: green;
  color: black;
}

            

              
                Copy
              
            
          

            <p>This is some text.</p>

            

              
                Copy
              
            
          

இங்கே, பயனர் <p> டேக்கிற்குள் உரையைத் தேர்ந்தெடுத்தால், அது ஒரு பச்சை பின்னணி மற்றும் கருப்பு உரையைக் கொண்டிருக்கும். p::selection தேர்வான்கள் உலகளாவிய ::selection தேர்வானை விட அதிக குறிப்பிட்டது.

ஹைலைட் அடுக்கை நிர்வகிப்பதற்கான உத்திகள்

ஹைலைட் அடுக்கை திறம்பட நிர்வகிக்கவும், உங்கள் தனிப்பயன் ஹைலைட் ஸ்டைல்கள் நோக்கம் கொண்டபடி பயன்படுத்தப்படுவதை உறுதி செய்யவும், பின்வரும் உத்திகளைக் கருத்தில் கொள்ளுங்கள்:

1. குறிப்பிட்ட தேர்வான்களைப் பயன்படுத்துங்கள்

நீங்கள் ஸ்டைல் செய்ய விரும்பும் எலிமெண்டுகளைக் குறிவைக்க குறிப்பிட்ட தேர்வான்களைப் பயன்படுத்துங்கள். உதாரணமாக, உலகளாவிய ::selection விதியைப் பயன்படுத்துவதற்குப் பதிலாக, .my-section::selection அல்லது #my-element::selection போன்ற அதிக குறிப்பிட்ட தேர்வான்களைப் பயன்படுத்தி உங்கள் வலைத்தளத்தின் குறிப்பிட்ட எலிமெண்டுகள் அல்லது பிரிவுகளைக் குறிவையுங்கள்.

2. highlight-name பண்பைப் பயன்படுத்திக் கொள்ளுங்கள்

முடிந்தபோதெல்லாம், பெயரிடப்பட்ட ஹைலைட்டுகளை வரையறுக்க ::highlight உடன் highlight-name பண்பைப் பயன்படுத்தவும். இது உரையின் குறிப்பிட்ட பகுதிகளைக் குறிவைத்து, அவற்றின் பொருளுணர் அர்த்தம் அல்லது சூழலின் அடிப்படையில் வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்த உங்களை அனுமதிக்கிறது.

3. !important-ஐத் தவிர்க்கவும் (பொதுவாக)

!important திறவுச்சொல்லைப் பயன்படுத்துவது கவர்ச்சிகரமானதாக இருந்தாலும், முடிந்தவரை அதைத் தவிர்க்க வேண்டும். !important-ஐப் பயன்படுத்துவது உங்கள் CSS-ஐப் பராமரிப்பதை கடினமாக்கும் மற்றும் எதிர்பாராத முரண்பாடுகளுக்கு வழிவகுக்கும். அதற்கு பதிலாக, அடுக்கைக் கட்டுப்படுத்த தனித்தன்மையைப் பயன்படுத்துவதில் கவனம் செலுத்துங்கள்.

4. உங்கள் CSS-ஐ ஒழுங்கமைக்கவும்

உங்கள் CSS-ஐ ஒரு தர்க்கரீதியான மற்றும் சீரான முறையில் ஒழுங்கமைக்கவும். உங்கள் குறியீட்டை ஆவணப்படுத்தவும், தொடர்புடைய ஸ்டைல்களை ஒன்றாகக் குழுவாக்கவும் கருத்துகளைப் பயன்படுத்தவும். இது உங்கள் CSS-ஐப் புரிந்துகொள்வதையும் பராமரிப்பதையும் எளிதாக்கும்.

5. முழுமையாகச் சோதிக்கவும்

உங்கள் தனிப்பயன் ஹைலைட் ஸ்டைல்களை வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் முழுமையாகச் சோதிக்கவும். வெவ்வேறு உலாவிகளில் CSS அடுக்கின் சற்று வித்தியாசமான செயலாக்கங்கள் இருக்கலாம், எனவே உங்கள் ஸ்டைல்கள் எல்லா தளங்களிலும் சீராகப் பயன்படுத்தப்படுவதை உறுதி செய்வது முக்கியம்.

6. அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்

தனிப்பயன் ஹைலைட் ஸ்டைல்களை வடிவமைக்கும்போது எப்போதும் அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள். நீங்கள் தேர்ந்தெடுக்கும் வண்ணங்கள் உரைக்கும் பின்னணிக்கும் இடையில் போதுமான மாறுபாட்டை வழங்குவதை உறுதி செய்யுங்கள். மேலும், அறிவாற்றல் குறைபாடுகள் உள்ள பயனர்களுக்கு கவனச்சிதறல் அல்லது குழப்பத்தை ஏற்படுத்தக்கூடிய ஸ்டைல்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.

அணுகல்தன்மை பரிசீலனைகள்

உரைத் தேர்வு ஹைலைட்டுகளைத் தனிப்பயனாக்குவது பயனர் அனுபவத்தை கணிசமாக மேம்படுத்தும், ஆனால் அணுகல்தன்மைக்கு முன்னுரிமை அளிப்பது முக்கியம். மோசமாக வடிவமைக்கப்பட்ட ஹைலைட்டுகள் பார்வை குறைபாடுகள் அல்லது அறிவாற்றல் குறைபாடுகள் உள்ள பயனர்களுக்கு உள்ளடக்கத்தைப் படிப்பதையும் புரிந்துகொள்வதையும் கடினமாக்கும்.

வண்ண மாறுபாடு

உரைக்கும் பின்னணிக்கும் இடையிலான வண்ண மாறுபாடு போதுமானதாக இருப்பதை உறுதி செய்யுங்கள். வலை உள்ளடக்க அணுகல்தன்மை வழிகாட்டுதல்கள் (WCAG) சாதாரண உரைக்கு குறைந்தபட்சம் 4.5:1 மற்றும் பெரிய உரைக்கு 3:1 என்ற மாறுபாட்டு விகிதத்தைப் பரிந்துரைக்கின்றன. உங்கள் ஹைலைட் வண்ணங்களின் மாறுபாட்டு விகிதத்தைச் சரிபார்க்க ஆன்லைன் கருவிகளைப் பயன்படுத்தவும்.

ஒளிரும் அல்லது சிமிட்டுவதைத் தவிர்க்கவும்

உங்கள் ஹைலைட் ஸ்டைல்களில் ஒளிரும் அல்லது சிமிட்டும் விளைவுகளைப் பயன்படுத்துவதைத் தவிர்க்கவும். இந்த விளைவுகள் கவனச்சிதறலை ஏற்படுத்தக்கூடும் மற்றும் ஒளி உணர்திறன் கால்-கை வலிப்பு உள்ள பயனர்களுக்கு வலிப்புகளைத் தூண்டக்கூடும்.

தெளிவான காட்சி குறிப்புகளை வழங்கவும்

ஹைலைட் ஸ்டைல்கள் உரை தேர்ந்தெடுக்கப்பட்டிருப்பதைக் குறிக்க தெளிவான காட்சி குறிப்புகளை வழங்குவதை உறுதி செய்யுங்கள். தெளிவற்ற அல்லது குழப்பமானதாக இருக்கக்கூடிய ஸ்டைல்களைப் பயன்படுத்துவதைத் தவிர்க்கவும். உதாரணமாக, இயல்புநிலை பின்னணி நிறத்திற்கு மிகவும் ஒத்த பின்னணி வண்ணங்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.

உதவித் தொழில்நுட்பங்களுடன் சோதிக்கவும்

ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களுடன் உங்கள் தனிப்பயன் ஹைலைட் ஸ்டைல்களைச் சோதிக்கவும். தேர்ந்தெடுக்கப்பட்ட உரை ஸ்கிரீன் ரீடரால் சரியாக அறிவிக்கப்படுவதையும், ஹைலைட் ஸ்டைல்கள் பயனர் உள்ளடக்கத்தை வழிநடத்துவதற்கும் புரிந்துகொள்வதற்கும் தடையாக இல்லை என்பதையும் உறுதி செய்யுங்கள்.

சர்வதேசமயமாக்கல் மற்றும் உள்ளூர்மயமாக்கல் பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக வலைத்தளங்களை உருவாக்கும்போது, சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) ஆகியவற்றைக் கருத்தில் கொள்வது முக்கியம். இது உங்கள் வலைத்தளத்தின் உள்ளடக்கம் மற்றும் வடிவமைப்பை வெவ்வேறு மொழிகள், கலாச்சாரங்கள் மற்றும் பிராந்தியங்களுக்கு ஏற்ப மாற்றுவதை உள்ளடக்குகிறது.

உரை திசை

வெவ்வேறு உரை திசைகளைப் பற்றி அறிந்திருங்கள். அரபு மற்றும் ஹீப்ரு போன்ற சில மொழிகள் வலமிருந்து இடமாக (RTL) எழுதப்படுகின்றன. உங்கள் தனிப்பயன் ஹைலைட் ஸ்டைல்கள் இடமிருந்து வலமாக (LTR) மற்றும் RTL உரை திசைகளுடன் சரியாக வேலை செய்வதை உறுதி செய்யுங்கள். CSS தர்க்கரீதியான பண்புகள் (எ.கா., `margin-inline-start`, `border-inline-end`) இங்கே உதவியாக இருக்கும்.

கலாச்சார வேறுபாடுகள்

ஹைலைட் வண்ணங்களைத் தேர்ந்தெடுக்கும்போது கலாச்சார வேறுபாடுகளை மனதில் கொள்ளுங்கள். வண்ணங்கள் வெவ்வேறு கலாச்சாரங்களில் வெவ்வேறு அர்த்தங்களைக் கொண்டிருக்கலாம். உதாரணமாக, சிவப்பு நிறம் ஒரு கலாச்சாரத்தில் நல்ல அதிர்ஷ்டத்தையும் மற்றொன்றில் ஆபத்தையும் குறிக்கலாம். உங்கள் வலைத்தளத்திற்கான இலக்கு சந்தைகளில் வண்ணங்களின் கலாச்சார முக்கியத்துவத்தை ஆராயுங்கள்.

எழுத்துரு ஆதரவு

நீங்கள் தேர்ந்தெடுத்த எழுத்துருக்கள் வெவ்வேறு மொழிகளில் பயன்படுத்தப்படும் எழுத்துக்கள் மற்றும் குறியீடுகளை ஆதரிக்கின்றனவா என்பதை உறுதிப்படுத்தவும். பரந்த அளவிலான எழுத்துக்களை ஆதரிக்கும் யூனிகோட் எழுத்துருக்களைப் பயன்படுத்தவும். மேலும், பயனரின் சாதனத்தில் தேவையான எழுத்துருக்கள் நிறுவப்படாவிட்டாலும், உங்கள் வலைத்தளத்தின் உரை சரியாகக் காட்டப்படுவதை உறுதிசெய்ய எழுத்துரு பின்வாங்கல் உத்திகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

CSS தனிப்பயன் ஹைலைட் அடுக்கிற்கான சில நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகளை ஆராய்வோம்:

1. குறியீட்டிற்கான பொருளுணர் ஹைலைட்டிங்

திறவுச்சொற்கள், மாறிகள் மற்றும் கருத்துகள் போன்ற வெவ்வேறு வகையான குறியீட்டு எலிமெண்டுகளை ஹைலைட் செய்ய தனிப்பயன் ஹைலைட்டுகளைப் பயன்படுத்தலாம். இது பயனர்கள் குறியீட்டுத் துணுக்குகளைப் படிப்பதையும் புரிந்துகொள்வதையும் எளிதாக்கும்.

            /* CSS */
::highlight(keyword) {
  color: #0077cc;
}

::highlight(variable) {
  color: #cc0077;
}

::highlight(comment) {
  color: #666666;
  font-style: italic;
}

            

              
                Copy
              
            
          

            <pre><code>
  <span style="--highlight: keyword;">function</span> <span style="--highlight: variable;">greet</span>(<span style="--highlight: variable;">name</span>) {
    <span style="--highlight: comment;">// This is a comment</span>
    console.log("Hello, " + <span style="--highlight: variable;">name</span> + "!");
  }
</code></pre>

            

              
                Copy
              
            
          

2. தேடல் சொற்களை ஹைலைட் செய்தல்

தேடல் முடிவுகளுக்குள் தேடல் சொற்களை ஹைலைட் செய்ய தனிப்பயன் ஹைலைட்டுகளைப் பயன்படுத்தலாம். இது பயனர்கள் தங்கள் தேடல் வினவலுக்குத் தொடர்புடைய உரையின் பகுதிகளை விரைவாக அடையாளம் காண உதவும்.

            /* CSS */
::highlight(search-term) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

            <p>This is a <span style="--highlight: search-term;">search</span> result that contains the <span style="--highlight: search-term;">search</span> term.</p>

            

              
                Copy
              
            
          

3. படிவங்களில் தேவையான புலங்களைக் குறித்தல்

படிவங்களில் தேவையான புலங்களைக் குறிக்க தனிப்பயன் ஹைலைட்டுகளைப் பயன்படுத்தலாம். இது பயனர்கள் படிவத்தைச் சமர்ப்பிப்பதற்கு முன் நிரப்ப வேண்டிய புலங்களை விரைவாக அடையாளம் காண உதவும்.

            /* CSS */
::highlight(required) {
  background-color: #ffeeee;
  border: 1px solid red;
}

            

              
                Copy
              
            
          

            <label for="name">Name:</label>
<input type="text" id="name" <span style="--highlight: required;">required</span><br>

            

              
                Copy
              
            
          

முடிவுரை

CSS தனிப்பயன் ஹைலைட் அடுக்கு, உரைத் தேர்வு ஹைலைட்டுகளைத் தனிப்பயனாக்குவதற்கும், பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் பயனர் நட்பு அனுபவத்தை உருவாக்குவதற்கும் சக்திவாய்ந்த கருவிகளை வழங்குகிறது. CSS அடுக்கு, தனித்தன்மை விதிகள், மற்றும் ::selection மற்றும் ::highlight ஆகியவற்றின் திறன்களைப் புரிந்துகொள்வதன் மூலம், நீங்கள் ஹைலைட் ஸ்டைல்களை திறம்பட நிர்வகிக்கலாம் மற்றும் அவை நோக்கம் கொண்டபடி பயன்படுத்தப்படுவதை உறுதி செய்யலாம். உலகளாவிய பார்வையாளர்களுக்கு உள்ளடக்கிய மற்றும் அணுகக்கூடிய ஒரு வலைத்தளத்தை உருவாக்க, தனிப்பயன் ஹைலைட் ஸ்டைல்களை வடிவமைக்கும்போது அணுகல்தன்மை மற்றும் சர்வதேசமயமாக்கலைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள். `::selection` மற்றும் `::highlight` பயன்பாட்டைப் பொருளுணர் HTML மற்றும் CSS தனிப்பயன் பண்புகளுடன் கவனமாகத் திட்டமிடுவதன் மூலம், நீங்கள் விரும்பும் ஹைலைட்டிங் விளைவை துல்லியமாக அடைய முடியும், இது உங்கள் வலைப்பக்கங்களின் பயன்பாட்டினை மற்றும் காட்சி முறையீட்டை மேம்படுத்துகிறது. இந்த CSS அம்சங்கள் வழங்கும் நெகிழ்வுத்தன்மை, பயனர்களுக்கு ஒரு பொருத்தமான மற்றும் உள்ளுணர்வு அனுபவத்தை உருவாக்க உங்களை அனுமதிக்கிறது, உங்கள் உள்ளடக்கத்தை மேலும் ஈர்க்கக்கூடியதாகவும் அணுகக்கூடியதாகவும் மாற்றுகிறது.